<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #d1{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

    </style>

</head>
<body>
    <div id="d1">

    </div>
    
</body>
<script>
    let div = document.querySelector("#d1");

    // div.onclick = function(){
    //     // var that = this
    //     setInterval(function(){
        //指向windows this执行改变
    //         console.log(this);
    //   this.style.backgroundColor = `rgb(${ parseInt( Math.random()*255)},${ parseInt( Math.random()*255)},${ parseInt( Math.random()*255)},${ parseInt( Math.random()*255)})`
    //     }.bind(this),1000)
    // }


    div.onclick = function(){
        // var that = this
        console.log(this);
        setInterval(()=>{
        //箭头函数this指向的是外部的this
            console.log(this);
      this.style.backgroundColor = `rgb(${ parseInt( Math.random()*255)},${ parseInt( Math.random()*255)},${ parseInt( Math.random()*255)},${ parseInt( Math.random()*255)})`
        },1000)
    }



</script>

</html>